<template>
    <div class="ph-input-wrap ph-select-wrap ph-icon-arrow ph-icon-arrow-down" v-och="visible">
        <ph-input @click="toggle" :value="text" :disabled="disabled" :placeholder="placeholder" :readonly="true" class="ph-select"/>
        <transition name="ph-upbit">
            <ph-list ref="edropdown" v-show="visible" :style="dropdownStyle" :class="['ph-options',type?'ph-options-'+type:'']" :footbar="multiple" :miniFootbar="true" :align="align">
                <slot></slot>
                <template v-if="multiple" v-slot:footbar>
                    <ph-button :mini="true" @click="onDone">确定</ph-button>
                </template>
            </ph-list>
        </transition>
    </div>
</template>
<script lang="ts">
import { computed, defineComponent, provide, ref, toRef, unref, watch, inject, Ref, nextTick, reactive } from 'vue'
import { och } from '../../../directives'
import getPosition from '../../../shared/get-position'
interface Opt{
    value:string|number,
    text:string,
    selected?:boolean
}
import {PhList} from '../../list'
import {PhButton} from '../../base'
import PhInput from '../input.vue'
export default defineComponent({
    directives:{
        och
    },
    components:{PhList,PhButton,PhInput},
    props:{
        disabled:{type:Boolean,default:false},
        multiple:{type:Boolean,default:false},
        placeholder:{type:String},
        value:{type:[String,Number,Array]},
        align:{type:String,default:'left'},
        type:{
            type:String,
        },
    },
    setup(props,{emit}){
        const dropdownStyle = reactive({
            left:"0px",
            top:"0px"
        })
        const edropdown = ref<InstanceType<typeof PhList>>()
        const visible = ref(false)
        const options = ref<Opt[]>([])
        const cacheValues = ref<Array<string|number>>([])
        const values = computed<Array<string|number>>(()=>{
            if(!props.value)return []
            if(props.multiple){
                if(props.value instanceof Array)return props.value as Array<string|number>
                else return [props.value] as Array<string|number>
            }
            return [props.value] as Array<string|number>
        })
        const text = computed(()=>{
            const res = options.value.filter((d:Opt)=>values.value.includes(d.value))
            const text = res.map((opt:Opt)=>opt.text).join(",")
            return text?text:''
        })
        const inputcn = computed(()=>{
            return {
                'ph-select-handle':true,
                'ph-placeholder':!text.value
            }
        })
        const initCacheValues = ()=>{
            values.value.forEach((a)=>cacheValues.value.push(a))
        }
        const addOption = (data:Opt)=>{
            options.value.push(data)
        }
        const update = (opt:Opt)=>{
            if(props.multiple){
                if(opt.selected)cacheValues.value.push(opt.value)
                else cacheValues.value.splice(cacheValues.value.indexOf(opt.value),1)
            }else{
                visible.value = false
                cacheValues.value = [opt.value]
                emit('change',opt.value)
            }
        }
        const onDone = ()=>{
            visible.value = false
            //断开引用
            emit('change',[...unref(cacheValues)] )
        }
        const toggle = ()=>{
            if(props.disabled)return
            visible.value=!visible.value
            if(visible.value)
            nextTick(()=>{
                const {x,y} = getPosition(edropdown.value?.$el as HTMLElement)
                dropdownStyle.left = x+"px"
                dropdownStyle.top = y+"px"
            })
        }
        provide("update",update)
        provide("addOption",addOption)
        provide("cvalue",cacheValues)
        provide("multiple",toRef(props,'multiple'))
        initCacheValues()
        return {visible,text,onDone,inputcn,toggle,edropdown,dropdownStyle}
    }
})
</script>

<style lang="scss">
@import '../../../assets/scss/predef.scss';
.ph-select-wrap{
    overflow: visible;
    position: relative;
    .ph-select{
        cursor: pointer;
        position: relative;
        z-index: 1;
        width: 100%;
        background-color: transparent;
    }
    .ph-options{
        position: absolute;
        top:0;
        min-width: 100%;
        width: auto;
        background-color: #fff;
        border: 1px solid #dacdcd;
        box-shadow: 0px 1px 10px rgb(0 0 0 / 30%);
        max-height: calc(var(--phx) * 20);
        border-radius: 0 0 4px 4px;
        z-index: 9900;
        overflow: hidden;
        margin-bottom:0;
        &-primary{
            --ph-theme:var(--ph-primary)
        }
        &-success{
            --ph-theme:var(--ph-success)
        }
        &-danger{
            --ph-theme:var(--ph-danger)
        }
        &-warning{
            --ph-theme:var(--ph-warning)
        }
    }
}
</style>